<template>
  <div class="event-body">
    <div class="event-body-content">
      <div>
        <span class="m-r-20">事件类型</span>
        <Select v-model="oEvent.type" style="width:180px">
          <Option v-for="(item, index) in typeList" :value="item" :key="index">{{ item }}</Option>
        </Select>
      </div>
      <div class="m-t-10">
        <span class="m-r-20">A&nbsp;端组件</span>
        <Button size="small" @click="AComponentSelect">选择</Button>
        <Button size="small" @click="eventAComponentAdd" v-if="setting.value[0].markSelect !== false">确定</Button>
      </div>
      <div class="m-t-10" v-if="oEvent.AComponent != null && oEvent.AComponent.length > 0">
        <div class="event-body-list m-b-10" v-for="(item, index) in oEvent.AComponent" :key="index">
          <span class="m-r-20">名称</span>
          <Input v-model="item.label" size="small" style="width: 130px" disabled/>
          <Button size="small" class="m-l-10">删除</Button>
        </div>
      </div>
      <div class="m-t-10">
        <span class="m-r-20">Z&nbsp;端组件</span>
        <Button size="small">选择</Button>
        <Button size="small">确定</Button>
      </div>
      <div class="m-t-10" v-if="oEvent.ZComponent != null && oEvent.ZComponent.length > 0">
        <div class="event-body-list m-b-10" v-for="(item, index) in oEvent.ZComponent" :key="index">
          <div>
            <span class="m-r-20">名称</span>
            <Input v-model="item.label" size="small" style="width: 130px" disabled />
            <Button size="small" class="m-l-10">删除</Button>
          </div>
          <div class="m-t-10">
            <span class="m-r-20">方法</span>
            <Input v-model="item.executionMethod" type="textarea" :rows="3" style="width: 190px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emitter from '../../../../mixins/emitter'
export default {
  name: 'Event',
  props: {
    setting: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data () {
    return {
      oEvent: {
        type: '',
        AComponent: [
          { label: '分析', value: '', key: '', id: 0 },
          { label: '查询', value: '', key: '', id: 0 },
        ],
        ZComponent: [
          { label: '分析', value: '', key: '', id: 0 , executionMethod: '' },
        ],
      },
      typeList: ['click', 'on-change', 'on-enter', 'on-blur']
    }
  },
  methods: {
    AComponentSelect () {
      this.setting.value[0].markSelect = true
      emitter.methods.dispatch('MainBoard', 'AComponent-selected', [this.setting.value[0].markSelect, 0], this)
    },
    eventAComponentAdd() {
      this.setting.value[0].markSelect = false
      emitter.methods.dispatch('MainBoard', 'AComponent-selected', [this.setting.value[0].markSelect, 0], this)
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.event-body {

  .event-body-content {
    border:1px solid #979797;
    padding: 5px;
    .event-body-list{
      border:1px solid #979797;
      padding: 5px;
    }
  }
}
</style>
